<template>
	<div class="all">
		<div class="title">
			全部商品
		</div>
		<div class="goods-list">
			<div v-for="item in all" :key="item.pid" class="goods-item" @click="toBuy(item)">
				<img :src="item.defaultAlbum" alt="" class="goods-img">
				<div class="goods-info">
					<p class="name">
						{{ item.pName }}
					</p>
					<p class="price">
						￥ {{ item.fSalePrice }}
					</p>
				</div>
			</div>
		</div>
		<div v-if="lastPage > page" class="more" @click="getMore">
			点击加载更多+
		</div>
		<div v-else class="more">
			没有更多
		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		components: {},
		props: {
			dataId: {
				type: [Number,String],
				default: "",
			}
		},
		data() {
			return {
				all: [],
				page: 1,
				id: "",
				lastPage: 0,
				PageTotal: 0, // 总条目数
			};
		},
		mounted() {
			// this.getData(this.dataId)
		},
		methods: {
			toBuy(item) {
				this.$router.push({
					path: "/fruit/detail?id=" + item.pid
				});
			},
			getData(id) {
				this.id = id;
				this.recommed = [];
				let data = {
					queryCondition: {
						order: [{
							fieldname: "iOrder",
							direction: "asc",
						}, ],
						pageindex: this.page,
						pagesize: 8,
						where: [{
							fieldname: "categoryid",
							valuefrom: sessionStorage.getItem('CateDetailID'),
						}, ],
					},
				};
				this.$api.home.getProductList(data).then((res) => {
					if (res.code == 200) {
						
						this.all = this.all.concat(res.data.data);
						this.lastPage = res.data.totalPage
						// this.page++
						
					}
				});
			},
			getMore() {
				this.page++;
				this.getData(this.id);
			},
		},
	};
</script>

<style scoped lang="scss">
	.all {
		padding: 0 16.19rem;
		margin-top: 2.19rem;
		display: flex;
		flex-direction: column;

		.title {
			width: 11.25rem;
			height: 3.44rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(234, 234, 234, 1);
		}

		.goods-list {
			margin-top: 1.88rem;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.goods-item {
				height: 29.5rem;
				width: 24%;
				background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				position: relative;
				margin-right: 1.33333%;
				margin-bottom: 1.25rem;
				cursor: pointer;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.goods-img {
					width: 15rem;
					height: 15rem;
					object-fit: contain;
				}

				.top-img {
					width: 3.94rem;
					height: 3.94rem;
					position: absolute;
					top: 1.25rem;
					left: 1.56rem;
				}

				.goods-info {
					display: flex;
					flex-direction: column;
					text-align: center;
					padding: 0 1rem;

					.name {
						font-size: 1.13rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 18rem;
					}

					.price {
						font-size: 1.5rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(243, 64, 111, 1);
						margin-top: 0.94rem;
					}
				}
			}
		}

		.more {
			font-size: 1rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 1.95rem;
			text-align: center;
			margin: 3.13rem auto;
			cursor: pointer;
		}
	}
</style>
